<template>
  <div class="flex gap-4 flex-col p-4">
    <div v-for="field in fieldStore.fields" class="cursor-pointer flex justify-between gap-4" :key="field.prop"
      :disable-transitions="false" @click="onChoose(field)">
      <span class="truncate" :class="fieldStore.curField == field ? 'text-yellow-600' : ''">{{ field.prop }} {{
        field.label
      }}</span>
      <span class="text-red-700 text-nowrap" @click.stop="fieldStore.deleteField(field)">删除</span>
    </div>
  </div>
</template>

<script setup>
import { useFieldStore } from '@/stores/field';

const fieldStore = useFieldStore()

const onChoose = (field) => {
  fieldStore.setCurField(field)
  fieldStore.setDrawer(true)
}
</script>